<!--

/*
* Copyright (C) 2005-2013 University of Sydney
*
* Licensed under the GNU License, Version 3.0 (the "License"); you may not use this file except
* in compliance with the License. You may obtain a copy of the License at
*
* http://www.gnu.org/licenses/gpl-3.0.txt
*
* Unless required by applicable law or agreed to in writing, software distributed under the License
* is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
* or implied. See the License for the specific language governing permissions and limitations under
* the License.
*/

/**
* brief description of file
*
* @author      Tom Murtagh
* @author      Kim Jackson
* @author      Ian Johnson   <ian.johnson@sydney.edu.au>
* @author      Stephen White   <stephen.white@sydney.edu.au>
* @author      Artem Osmakov   <artem.osmakov@sydney.edu.au>
* @copyright   (C) 2005-2013 University of Sydney
* @link        http://Sydney.edu.au/Heurist
* @version     3.1.0
* @license     http://www.gnu.org/licenses/gpl-3.0.txt GNU License 3.0
* @package     Heurist academic knowledge management system
* @subpackage  !!!subpackagename for file such as Administration, Search, Edit, Application, Library
*/

-->
<!--

/**
 * filename, brief description, date of creation, by whom
 * @copyright (C) 2005-2010 University of Sydney Digital Innovation Unit.
 * @link: http://HeuristScholar.org
 * @license http://www.gnu.org/licenses/gpl-3.0.txt
 * @package Heurist academic knowledge management system
 * @todo
 **/

-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>Temporal Object</title>
		<style type="text/css">
			/*margin and padding on body element
			  can introduce errors in determining
			  element position and are not recommended;
			  we turn them off as a foundation for YUI
			  CSS treatments. */
			body {
				margin:0;
				padding:0;
			}
			.date-button {
				margin: 3px;
				width: 24px;
				height: 18px;
				background: url(../images/cal.gif) lightgray scroll center center no-repeat;
			}
		</style>


		<!--link rel="stylesheet" type="text/css" href="../../external/yui/2.7.0/build/fonts/fonts-min.css" />
		<link rel="stylesheet" type="text/css" href="../../external/yui/2.7.0/build/tabview/assets/skins/sam/tabview.css" />
		<link rel="stylesheet" type="text/css" href="../../external/yui/2.7.0/build/calendar/assets/skins/sam/calendar.css" />

		<script type="text/javascript" src="../../external/yui/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

		<script type="text/javascript" src="../../external/yui/2.7.0/build/element/element-beta-min.js"></script>
		<script type="text/javascript" src="../../external/yui/2.7.0/build/tabview/tabview-min.js"></script>
		<script type="text/javascript" src="../../external/yui/2.7.0/build/calendar/calendar-min.js"></script-->

		<link rel="stylesheet" type="text/css" href="../../external/yui/2.8.2r1/build/fonts/fonts-min.css" />
		<link rel="stylesheet" type="text/css" href="../../external/yui/2.8.2r1/build/tabview/assets/skins/sam/tabview.css" />
		<link rel="stylesheet" type="text/css" href="../../external/yui/2.8.2r1/build/calendar/assets/skins/sam/calendar.css" />

		<link rel="stylesheet" type="text/css" href="../../common/css/calendar.css" />

		<script type="text/javascript" src="../../external/yui/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>

		<script type="text/javascript" src="../../external/yui/2.8.2r1/build/element/element-min.js"></script>
		<script type="text/javascript" src="../../external/yui/2.8.2r1/build/tabview/tabview-min.js"></script>

		<script type="text/javascript" src="../../external/jquery/jquery.js"></script>

		<!--script>
			Timeline_ajax_url="../../external/timeline/timeline_ajax/simile-ajax-api.js?bundle=false";
			Timeline_urlPrefix='../../external/timeline/timeline_js/';
			Timeline_parameters='bundle=false';
		</script>
		<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/calendar/calendar-min.js"></script>
		<script src="../../external/timeline/timeline_js/timeline-api.js" type="text/javascript"></script-->
		<script type="text/javascript" src="../../common/js/hintDiv.js"></script>

	</head>
	<body class=" yui-skin-sam" style="background-color:rgb(240,240,240);" width=400 height=400 >

		<script type="text/javascript" src="../../common/js/calendarViewer.js"></script>
		<script type="text/javascript" src="../../common/js/calendar.js"></script>

		<div id=display-div class="yui-navset">
			<ul class="yui-nav">
				<li><a href="#s"><em>Simple Date</em></a></li>
				<li class="selected"><a href="#p"><em>Date Range</em></a></li>
				<li><a href="#f"><em>Aproximate Date</em></a></li>
				<li><a href="#c"><em>C14 Date</em></a></li>

			</ul>
			<div class="yui-content" style="background-color:rgb(240,240,240); border:0;">
				<div id="s">
					<div style="margin: 20px  0px 0px 50px">
						<div>
							<span title="Enter date in  y-m-d">
							Date:&nbsp;<input type=text id="simpleDate" style="width:150px;" />
							<input type=button class="date-button" id="calendar" onclick="calendarPopup(this);" />
							</span>
						</div>
						<div style="margin:5px 0px 15px 35px; font-size:8pt; color:grey;"  >
							<span >Year(eg.1624) of calendar date (yyyy-mm or yyyy-mm-dd)</span><br/>
							<span >use minus(-) for BCE dates(eg. -375 for 375 BCE)</span>
						</div>
					</div>
					<div style="border-top:1px solid lightgrey; margin :0px 10px"></div>
					<div style="margin: 15px  0px 0px 50px">
						<div>
							<span title="Enter time in  h:m:s">
								Time:&nbsp;<input type=text id="simpleTime" style="width:80px;" />
								<span style="font-size:8pt; color:grey;">&nbsp;(optional)</span>
							</span>
							<span title="Enter Time Zone offset starting with hours only enter minute for non-zero" style="margin:0px 30px">
								Time Zone:&nbsp;<u>+</u>
								<input type=text id="tzone" title="Time Zone Adjust hours (-12 to +12)" style="width:60px;" />
								<span style="font-size:8pt; color:grey;">&nbsp;(optional)</span>
							</span>
						</div>
						<div style="margin:5px 0px 15px 35px; font-size:8pt; color:grey;"  >
							<span>hh or hh:mm or hh:mm:ss</span>
							<span style="margin: 0px 120px;">+ for east (Europe,Africa,Asia)</span><br/>
							<span style="margin: 0px 0px 0px 245px;">- for west (N &amp; S America)</span>
						</div>
					</div>
					<div style="border-top:1px solid lightgrey; margin :0px 10px"></div>
					<div id="deterDiv" style="float:left;margin:0px 0px 0px 57px;">
						Type of Determination<br/>
						<span style="font-size:8pt; color:grey;">
						How were the dates arrived at?
						</span>
						<div style="margin:10px 25px;">
							<input type="radio" name="sDET"  value="0" checked="checked" />Unknown<br/>
							<input type="radio" name="sDET" value="1"/>Attested<br/>
							<input type="radio" name="sDET"  value="2"/>Conjecture<br/>
							<input type="radio" name="sDET"  value="3"/>Measurement
						</div>
					</div>
				</div>

				<div id="p">
					<div style="margin:20px 0px 10px 60px;">
						<canvas id="dRangeCanvas" width="530" height="80">
						</canvas>
					</div>
					<div style="margin-left:30px;">
						<div>
							<span title="Enter only the known values starting with year" style=" margin:0px 5px;">
								<input type=text id="TPQ" style="width:100px;" />
							</span>
							<span title="Press to set Probable begin equal to TPQ" style=" margin:0px 5px;">
								<input type=button id="setPDB" value="set =>" onclick="setPDBtoTPQ();" style="font-size: 7pt; width:35px;" />
							</span>
							<span title="Enter only the known values starting with year" style=" margin:0px 5px;">
								<input type=text id="PDB" style="width:100px;" />
							</span>
							<img style="width:30px; height:1px; border-top: 2px solid grey; margin:0px 5px;"/>
							<span title="Enter only the known values starting with year" style=" margin:0px 5px;">
								<input type=text id="PDE" style="width:100px;" />
							</span>
							<span title="Press to set Probable end equal to TAQ" style=" margin:0px 5px;">
								<input type=button id="setPDE" value="<= set" onclick="setPDEtoTAQ();" style="font-size: 7pt; width:35px;" />
							</span>
							<span title="Enter only the known values starting with year" style=" margin:0px 5px;">
								<input type=text id="TAQ" style="width:100px;" />
							</span>
						</div>
						<div>
							<span style="margin:5px 0px 15px 5px; font-size:8pt; color:grey;"> Terminus Post Quem </span>
							<span style="margin:5px 0px 15px 75px; font-size:8pt; color:grey;"> Probable begin </span>
							<span style="margin:5px 0px 15px 95px; font-size:8pt; color:grey;"> Probable End </span>
							<span style="margin:5px 0px 15px 72px; font-size:8pt; color:grey;"> Terminus Ante Quem </span>
						</div>
					</div>
					<div style="margin:20px 0px 20px 80px;">
						<span id="pSProfDiv">
							<label for="SPF" title="Select the profile">Start Profile:</label>
							<select id="SPF">
								<option label="Flat"  selected value=0>Flat</option>
								<option label="Central" value=1>Central Tendancy</option>
								<option label="Slow Start" value=2>Slow Start</option>
								<option label="Slow Finish" value=3>Slow Finish</option>
							</select>
						</span>
						<img style="height:1px; margin:0px 70px;"/>
						<span id="pEProfDiv">
							<label for="EPF" title="Select the profile">End Profile:</label>
							<select id="EPF">
								<option label="Flat"  selected value=0>Flat</option>
								<option label="Central" value=1>Central Tendancy</option>
								<option label="Slow Start" value=2>Slow Start</option>
								<option label="Slow Finish" value=3>Slow Finish</option>
							</select>
						</span>
					</div>
					<div style="margin:10px 20px; ">
						<div style="border: 1px solid grey; float:left; width:300px; padding:10px;" >
							<b>Entering dates</b><br/>
							<span style="font-size:8pt; color:grey;">Year(eg.1624) of calendar date (yyyy-mm or yyyy-mm-dd)<br/>
							use minus(-) for BCE dates(eg. -375 for 375 BCE)</span><br/><br/>
							<b>Start &amp; End profile</b><br/>
							<span style="font-size:8pt; color:grey;">What is the distribution of the likelihood of the date<br/>
							between the terminus date and the probable date<br/>
							(if in doubt, choose flat, that is any point is equally likely).</span><br/>
						</div>
						<div id="deterDiv" style="float:left;margin:0px 0px 0px 57px;">
							Type of Determination<br/>
							<span style="font-size:8pt; color:grey;">
							How the dates arrived at?
							</span>
							<div style="margin:10px 25px;">
								<input type="radio" name="pDET"  value="0" checked="checked" />Unknown<br/>
								<input type="radio" name="pDET" value="1"/>Attested<br/>
								<input type="radio" name="pDET"  value="2"/>Conjecture<br/>
								<input type="radio" name="pDET"  value="3"/>Measurement
							</div>
						</div>
					</div>
				</div>

				<div id="f">
					<div style="margin:20px 0px 20px 50px; ">
						<div style="float:left; width:430px;">
							<div>
								<span title="Enter date in  y-m-d">
								Approximate date&nbsp;<input type=text id="fDAT" style="width:150px;" />
								</span>
							</div>
							<div style="font-size:8pt; color:grey; margin:5px 0px 15px 105px;">
								<span >Year(eg.1624) of calendar date (yyyy-mm or yyyy-mm-dd)</span><br/>
								<span >use minus(-) for BCE dates(eg. -375 for 375 BCE)</span>
							</div>
							<div>
								<div title="Enter duration in  PnYnMnDTnHnMnS format">
									<span style="margin-right:50px">Range</span>
									<u>+</u>&nbsp;&nbsp;<input type=text id="fRNG" style="width:50px; margin-right:5px" />
									<select id="level">
										<option label="Year"  selected value="Y">Year</option>
										<option label="Month" value="M">Month</option>
										<option label="Day" value="D">Day</option>
									</select><br/>
								</div>
								<div style="font-size:8pt; color:grey; margin: 5px 0px 15px 105px;">
									Actual date is assumed to lie withinthis range.
								</div>
							</div>
							<div id="fProfDiv" >
								<label for="fPRF" title="Select the profile">Probability curve &nbsp;</label>
								<select id="fPRF">
									<option label="Flat"  selected value=0>Flat</option>
									<option label="Central" value=1>Central Tendancy</option>
									<option label="Slow Start" value=2>Slow Start</option>
									<option label="Slow Finish" value=3>Slow Finish</option>
								</select><br/>
								<div style="font-size:8pt; color:grey; margin: 5px 0px 0px 105px;">
									Distribution of the likelihood of the date between the limits set by the range.
								</div>
							</div>
						</div>
						<div id="fdeterDiv" style="float:left;margin:0px 0px 0px 57px;">
							Source of the estimate<br/>
							<span style="font-size:8pt; color:grey;">
							How the dates arrived at?
							</span>
							<div style="margin:10px 25px;">
								<input type="radio" name="fDET"  value="0" checked="checked" />Unknown<br/>
								<input type="radio" name="fDET" value="1"/>Attested<br/>
								<input type="radio" name="fDET"  value="2"/>Conjecture<br/>
								<input type="radio" name="fDET"  value="3"/>Measurement
							</div>
						</div>
					</div>
				</div>

				<div id="c">
					<div style="margin:20px 0px 20px 50px;">
						Mean Date:
						<input type=text id="BCE" title="Enter date in  y-m-d h:m:s" tabindex="1" onclick="return c14DateClick('BCE');" style="width:80px; margin: 0px 5px" />
						<span style="margin:0px 15px 0px 15px" >or</span>
							<input type=text id="BPD" title="Enter date in  y-m-d h:m:s" tabindex="-1" onclick="return c14DateClick('BPD');" style="width:80px; margin: 0px 5px 0px 0px" />
						<br/>
						<span style="margin:5px 10px 15px 78px; font-size:8pt; color:grey;"> Years BCE </span>
						<span style="margin:5px 0px 15px 55px; font-size:8pt; color:grey;"> Years BP </span>
					</div>
					<div style="margin:20px 0px 20px 50px;">
						<span title="Enter duration in  PnYnMnDTnHnMnS format" style=" margin:0px 25px 0px 65px">±
							<input type=text id="DEV" onclick="return c14DevClick('DEV');" tabindex="2" style="width:50px; margin:0px 25px 0px 1px" />or
						</span>
						<span title="Enter duration in  PnYnMnDTnHnMnS format">+
							<input type=text id="DVP" onclick="return c14DevClick('DVP');" tabindex="-1" style="width:50px; margin:0px 9px 0px 1px" />
						</span>
						<span title="Enter duration in  PnYnMnDTnHnMnS format">-
							<input type=text id="DVN" onclick="return c14DevClick('DVP');" tabindex="-1" style="width:50px; margin:0px 0px 0px 4px" />
						</span><br/>
						<span style="margin:5px 10px 15px 80px; font-size:8pt; color:grey;">Std dev</span>
						<span style="margin:5px 10px 15px 70px; font-size:8pt; color:grey;">Pos dev </span>
						<span style="margin:5px 0px 15px 20px; font-size:8pt; color:grey;">Neg dev</span>
					</div>
					<div style="margin:20px 0px 20px 50px;">
						Lab Code:
						<input type=text id="COD" tabindex="4" title="Enter Lab Code" style="width:100px; margin: 0px 5px 0px 14px" />
						<span style="margin:0px 30px 0px 15px" >
							<input type="checkbox" tabindex="5" id="CAL" />Calibrated
						</span>
					</div>
				</div>
			</div>
		</div>
		<div>
			<span style="margin:10px 270px">&nbsp;</span>
			<span>
				<input type="button" tabindex="11" value="Save" onclick="TemporalPopup.close();" />
				<input type="button" tabindex="12" value="Cancel" onclick="TemporalPopup.cancel();" />
			</span>
		</div>
		<div style="border-top:1px solid grey; margin :10px 10px"></div>
		<div style="margin: 10px 0px 0px 20px">
			<div>
				<span title="Enter comment for this temporal or " >Comment/original information:
					<input type=text id="COM" tabindex="10" style="width:300px;" />
				</span>
			</div>
				<div style="margin:5px 0px 15px 175px; font-size:8pt; color:grey;"  >
					<span >Temporal objects are converted to a standard format.</span><br/>
					<span >This field is stored in the temporal to record the original values entered.</span>
				</div>
		</div>
		<script type="text/javascript" src="../js/temporalObjectLibrary.js"></script>
<!-- <script type="text/javascript" src="../../external/jquery/jquery.js"></script> moved on top-->
		<script type="text/javascript">

			function switchDev (toAsym) {
				if (toAsym) {
					$("#DEV")[0].disabled = true;
					$("#DVP")[0].disabled = false;
					$("#DVN")[0].disabled = false;
					$("input[name=stdDEV][value=asym]").attr("checked","checked");
					$("input[name=stdDEV][value=sym]").attr("checked","");
				}else{
					$("#DEV")[0].disabled = false;
					$("#DVP")[0].disabled = true;
					$("#DVN")[0].disabled = true;
					$("input[name=stdDEV][value=asym]").attr("checked","");
					$("input[name=stdDEV][value=sym]").attr("checked","checked");
				}
			}
/* old way
			var windowRef = document.parentWindow  ||  document.defaultView  ||  this.document._parentWindow;
			var popupOptions = {
				callback: function(date) {
					if (date) {
						document.getElementById("simpleDate").value = date;
					}
				},
				"close-on-blur": true,
				"no-titlebar": true,
				"no-resize": true
			};
*/

			function calendarPopup(buttonElt) {
/* old way
				var buttonPos = top.HEURIST.getPosition(buttonElt, true);
				popupOptions.x = buttonPos.x + 8 - 120;
				popupOptions.y = buttonPos.y + 8 - 80;

				top.HEURIST.util.popupURL(windowRef, top.HEURIST.basePath + "common/html/calendarTemplate.html#"+
					document.getElementById("simpleDate").value, popupOptions);
*/

				var callback =	function(date)
				{
					if (date) {
						document.getElementById("simpleDate").value = date;
						if(top.HEURIST.util.setDisplayPreference){
								top.HEURIST.util.setDisplayPreference("record-edit-date", date);
						}
						calendarViewer.close();
					}
				}
				var date = document.getElementById("simpleDate").value;
				if(top.HEURIST.util.isempty(date) && top.HEURIST.util.getDisplayPreference){
					date = top.HEURIST.util.getDisplayPreference("record-edit-date");
				}

				calendarViewer.showAt(top.HEURIST.util.getOffset(buttonElt), date, callback);
			}

			function setPDBtoTPQ () {
				var tpq = document.getElementById("TPQ");
				var pdb = document.getElementById("PDB");
				if (typeof tpq == "object" && typeof pdb == "object" && tpq.value) {
					pdb.value = tpq.value
				}
			}

			function setPDEtoTAQ () {
				var taq = document.getElementById("TAQ");
				var pde = document.getElementById("PDE");
				if (typeof taq == "object" && typeof pde == "object" && taq.value) {
					pde.value = taq.value
				}
			}

			function c14DevClick(id) {
				if($("#"+id).attr("tabindex")> -1) return true; //if input is in tab path then pass click on
				if (id == "DEV"){
					$("#DEV").attr("tabindex","2");
					$("#DEV").val($("#DVP").val());
					$("#DVP").val("");
					$("#DVN").val("");
					$("#DVP").attr("tabindex","-1");
					$("#DVN").attr("tabindex","-1");
				}else{
					$("#DEV").attr("tabindex","-1");
					$("#DVP").attr("tabindex","2");
					$("#DVP").val($("#DEV").val());
					$("#DVN").val($("#DEV").val());
					$("#DEV").val("");
					$("#DVN").attr("tabindex","3");
				}
			}

			function c14DateClick(id) {
				if($("#"+id).attr("tabindex")> -1) return true; //if input is in tab path then pass click on
				if (id == "BCE"){
					$("#BCE").attr("tabindex","1");
					$("#BCE").val($("#BPD").val());
					$("#BPD").val("");
					$("#BPD").attr("tabindex","-1");
				}else{
					$("#BPD").attr("tabindex","1");
					$("#BPD").val($("#BCE").val());
					$("#BCE").val("");
					$("#BCE").attr("tabindex","-1");
				}
			}

			function dRangeDraw() {
				var canvas = document.getElementById("dRangeCanvas");
				if (canvas.getContext) {
					var ctx = canvas.getContext("2d");

					ctx.fillStyle = "rgb(150,150,150)";
					ctx.fillRect (135, 0, 260, 60);
					var lingrad = ctx.createLinearGradient(75,0,135,0);
					lingrad.addColorStop(0, 'rgba(0,0,150,0)');
					lingrad.addColorStop(0.5, 'rgba(75,75,150,0.5)');
					lingrad.addColorStop(1, 'rgba(150,150,150,0.9)');
					var lingrad2 = ctx.createLinearGradient(455,0,395,0);
					lingrad2.addColorStop(0, 'rgba(0,0,150,0)');
					lingrad2.addColorStop(0.5, 'rgba(75,75,150,0.5)');
					lingrad2.addColorStop(1, 'rgba(150,150,150,0.9)');

					ctx.fillStyle = lingrad;
					ctx.fillRect (75, 0, 60, 60);
					ctx.fillStyle = lingrad2;
					ctx.fillRect (395, 0, 60, 60);
					ctx.beginPath();
					ctx.fillStyle = "rgba(0, 0, 200, 0.2)";
					ctx.lineWidth = 5;
					ctx.strokeStyle = "#808080";
					ctx.moveTo(0,62.5);
					ctx.lineTo(530,62.5);
					ctx.moveTo(75.5,0);
					ctx.lineTo(75.5,62.5);
					ctx.moveTo(135.5,0);
					ctx.lineTo(135.5,62.5);
					ctx.moveTo(395.5,0);
					ctx.lineTo(395.5,62.5);
					ctx.moveTo(455.5,0);
					ctx.lineTo(455.5,62.5);
					ctx.stroke();
					ctx.beginPath();
					ctx.fillStyle = "rgb(50,50,50)";
					ctx.font = "8pt Arial";
					drawLabel(ctx,"TPQ",75,80,20);
					drawLabel(ctx,"PB",135,80,20);
					drawLabel(ctx,"PE",395,80,20);
					drawLabel(ctx,"TAQ",455,80,20);
					ctx.fillStyle = "rgb(250,250,250)";
					ctx.font = "12pt Arial Bold";
					drawLabel(ctx,"likely range",265,40,60);
					ctx.stroke();
				}
			}

			function drawLabel ( ctx, label, xPos, yPos, maxX) {
				var pxLen = ctx.measureText(label).width;
				ctx.fillText(label, xPos - pxLen/2, yPos, maxX);
			}

			var TemporalPopup = (function () {
				//private members
				var _className = "Applet";  // I know this is a singleton and the application object, but hey it matches the pattern.
				var _tabView;
				var _type2TabIndexMap = {};

				function _init () {
					if (location.search.length > 1) {		// the calling app passed a parameter string - save it
						that.originalInputString = unescape(location.search.substring(1));
					}
					if ( Temporal.isValidFormat(that.originalInputString)) {
						try {
							that.origTemporal = Temporal.parse(that.originalInputString);
						}
						catch (e) {
							return "Error creating temporal from valid input string : " + that.originalInputString + " : " + e;
						}
					} else if (that.originalInputString) { // non temporal non empty string
						try {
								var tDate = TDate.parse(that.originalInputString);
								that.origTemporal = new Temporal();
								that.origTemporal.setType("s");  // simple date
								that.origTemporal.setTDate("DAT",tDate);
								that.origTemporal.setField("COM",that.originalInputString);
							}
							catch(e) { // unknown string
								that.origTemporal = new Temporal();
								that.origTemporal.setType("s");  // simple date with no date
								that.origTemporal.setField("COM",that.originalInputString);
							}
					} else { // empty string
						that.origTemporal = new Temporal();
						that.origTemporal.setType("s");  // simple date with no data
					}
					// set current temporal to original
					try {
						that.curTemporal = Temporal.cloneObj(that.origTemporal);
					}
					catch(e) {
						that.curTemporal = new Temporal();
						that.curTemporal.setType("s");  // simple date with no date
						that.curTemporal.setField("COM",that.originalInputString);
					}
					// set display
					_tabView = new YAHOO.widget.TabView('display-div');

					// set up temporal type to tab index mapping
					var tabs = _tabView.getAttributeConfig("tabs").value;
					for (var i=0; i < tabs.length; i++) {
						var type = tabs[i].getAttributeConfig("contentEl").value.id;
						_type2TabIndexMap[type] = i;
					}

					// select the tab for the initial temporal's type and change the label to show the user this is where things started
					_tabView.selectTab(_type2TabIndexMap[that.curTemporal.getType() ? that.curTemporal.getType():'s']);
					var activeTab = _tabView.getAttributeConfig("activeTab").value;
					activeTab.set("label", "<i>" + activeTab.get("label") + "</i>", false);
					_updateUIFromTemporal(that.curTemporal);
					_tabView.on('beforeActiveTabChange', function (ev) {
						var curType = ev.prevValue._configs.contentEl.value.id,
							newType = ev.newValue._configs.contentEl.value.id;
						// grab all the data from the current tab using the
						_updateTemporalFromUI(that.curTemporal);
						that.curTemporal.setType(newType);
						_updateUIFromTemporal(that.curTemporal);
						return;} );
					dRangeDraw();
				};


				function _updateUIFromTemporal (temporal) {
					var type = temporal.getType();
					if (!type) {
						return;
					}
					if (type === "s") {
						var tDate = temporal.getTDate("DAT");
						// if DAT then separate Date, Time and TimeZone
						if (tDate) {
							$("#simpleDate").val(tDate.toString("yy-MM-dd"));
							$("#simpleTime").val(tDate.toString("HH:mm:ss"));
							$("#tzone").val(tDate.toString("z"));
						}
					}
					var fields = Temporal.getFieldsForType(type);
					for(var i =0; i< fields.length; i++) {
						var code = fields[i];
						var val = temporal.getStringForCode(code);
						var elem = $( "#" + type + code);
						if (elem.length == 0) {
							elem = $("#" + code);
						}
						if (elem.length == 0) {
							elem = $("input[name=" + type + code + "]:checked");
						}
						if (type === "c" && val && (code == "DEV" || code == "DVP" ||code == "DVN" )) {
							var v = val.match(/P(\d+)Y/);
							val = v[1] ? v[1] : val;
						}
						if (type === "f" && val && code == "RNG" ) {
							var v = val.match(/P(\d+)(Y|M|D)/);
							val = v[1] ? v[1] : val;
							if (v[2]) $("#level").val(v[2]);
						}
						if (elem.length != 0) {
							switch (elem[0].type) {
								case "checkbox" :
									if (val) {
										elem.attr("checked","checked");
									}
									break;
								case "radio" :
									if (val) {
										elem.attr("checked","");
										elem = $("input[name=" + type + code + "][value=" + val + "]");
										elem.attr("checked","checked");
									}
									break;
								case "select-one" :
									if (val) {
										elem.val(val);
									}
									break;
								default :
									elem.val(val);
							}
						}
					}
				};

				function _updateTemporalFromUI (temporal) {
					var type = temporal.getType();
					var fields = Temporal.getFieldsForType(type);
					for(var i =0; i< fields.length; i++) {
						var code = fields[i];
						var elem = $( "#" + type + code);
						if (elem.length == 0) {
							elem = $("#" + code);
						}
						if (elem.length == 0) {
							elem = $("input[name=" + type + code + "]:checked");  //radio button group
						}
						if (elem.length != 0) {
							switch (elem[0].type) {
								case "checkbox" :
									if (elem.attr("checked")) {
										temporal.addObjForString(code, "1");
									}else {
										temporal.removeObjForCode(code);
									}
									break;
								default :
									if (elem.val()) {
										var val = elem.val();
										if (code == "RNG") {
											val = "P" + val + $("#level").val();
										}
										if (code == "DEV" || code == "DVP" ||code == "DVN" ) {
											val = "P" + val + "Y";
										}
										temporal.addObjForString(code, val);  // FIXME  this should validate input from the user.
									}else if (elem.length != 0) {
										temporal.removeObjForCode(code);
									}
							}
						}
					}
					if (type === "s") {
						var strDate = ($("#simpleTime").val());
						if (strDate && $("#tzone").val()) {
							var zone = $("#tzone").val().match(/^\s*(?:UTC|GMT)?\s*([\+|\-]?\d?\d:?(?:\d\d)?)?/)[1];
							if (zone) {
								strDate += " " + zone;
							}
						}
						if (strDate && $("#simpleDate").val()) {
							strDate = $("#simpleDate").val() + " " + strDate;
						}else{
							strDate = $("#simpleDate").val();
						}
						if (strDate) temporal.addObjForString("DAT", strDate);
					}
				};

				//public members
				var that = {
						originalInputString : "",
						origTemporal : null,
						curTemporal : null,
						name : "App",
						getTabView : function () {
							return _tabView;
						},
						close : function () {
							try{
								_updateTemporalFromUI(that.curTemporal);
							}catch(e) {	// save string in COM field and keep an empty simple date temporal
								alert(e);
								return;
							}
							var validity = Temporal.checkValidity(that.curTemporal);
							if (validity[0]) {  // valid temporal
								if (validity[2]) { //some extra code fields, so remove them
									for (var i=0; i<validity[2].length; i++) {
										that.curTemporal.removeObjForCode(validity[2][i]);
									}
								}
								window.close( that.curTemporal.toString());
							}else{
								var msg = "";
								for (var i = 0; i < validity[1].length; i++) {
								 if (!msg){
								 	msg = Temporal.getStringForCode(validity[1][i]);
								 }else{
								 	msg += ", " + Temporal.getStringForCode(validity[1][i]);
								 }
								}
								msg = msg ? "The current temporal is missing the " + msg + " value(s)." : "";
								msg +=  validity[3] ? " " + validity[3] : "";
								if (!confirm( msg +
										"Would you like to continue working? Press cancel to reset to the original string.")) {
									window.close(that.originalInputString);
								}else{
									window.close("");
								}
							}
						},
						cancel : function () {
							window.close(that.originalInputString);
						},
						getClass : function () {
							return _className;
						},
						isA: function(strClass) {
							if(strClass === _className) return true;
							return false;
						}
				};

				_init();
				return that;
			})();

		</script>
	</body>
</html>

